<template>
  <table border="1" cellspacing="0" width="80%">
    <thead>
    <tr>
      <th>姓名</th>
      <th>生日</th>
      <th>职位</th>
      <th>状态</th>
      <th>操作</th>
    </tr>
    </thead>

    <tbody>
    <tr v-for="em in cutBean.records">
      <td>{{ em.name }}</td>
      <td>{{ em.birthday }}</td>
      <td>{{ em.job }}</td>
      <td>{{ em.status }}</td>
      <td><input type="button" v-if="em.status=='在职'" value="离职" @click="dismission(em.id)">
        <input type="button" v-if="em.status=='在职'" value="修改" @click="findById(em.id)"></td>
    </tr>
    </tbody>
  </table>
  <div>
    <input type="button" v-for="pg in cutBean.pages" :key="pg"
           :value="pg" style="margin-left:10px " @click="findByItem(pg)">
  </div>
  <input type="button" value="添加" @click="this.isAddDiv=true">
  <div>
    姓名:<input type="text" v-model="findBoj.name"><br>
    起始日期:<input type="text" v-model="findBoj.startDate"><br>
    结束日期:<input type="text" v-model="findBoj.endDate"><br>
    <input type="button" value="查询" @click="findByItem(1)"/>
  </div>


  <div class="dialogDiv" v-if="isUpdateDiv">
    <div class="contentDiv">
      <img :src="'/project/emImg/'+updateObj.face" width="200px" height="200px"><br>
      姓名：{{ updateObj.name }}<br>
      生日：{{ updateObj.birthday }}<br>
      职位：<input type="text" v-model="updateObj.job"><br>
      状态：{{ updateObj.status }}<br>
      <input type="button" value="修改" @click="updateEmployee">
    </div>
  </div>

  <div class="dialogDiv" v-if="isAddDiv">
    <div class="contentDiv">
      姓名：<input type="text" v-model="addObj.name"><br>
      生日：<input type="text" v-model="addObj.birthday"><br>
      职位：<input type="text" v-model="addObj.job"><br>
      头像：<input type="file" ref="faceFile"><br>
      <input type="button" value="添加" @click="addEmployee">

    </div>
  </div>
</template>

<script>
import axios from "axios"

export default {
  data() {
    return {
      cutBean: {},
      findBoj: {},
      isUpdateDiv: false,
      isAddDiv: false,
      addObj: {},
      updateObj: {}
    }
  },
  methods: {
    findByItem(pageNO) {
      this.findBoj.pageNO = pageNO
      axios.get("/project/em/findByItem", {params: this.findBoj}).then(resp => {
        this.cutBean = resp.data;
      })
    },
    dismission(id) {
      axios.get("/project/em/dissmisson", {params: {id}}).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(1)
        }
      })
    },
    findById(id) {
      this.isUpdateDiv = true;
      axios.get("/project/em/findById", {params: {id}}).then(resp => {
        this.updateObj = resp.data
      })
    },
    updateEmployee() {
      axios.get("/project/em/update", {params: this.updateObj}).then(resp => {
        if (resp.data == "ok") {
          this.isUpdateDiv = false;
          this.findByItem(1)
        }
      })
    },
    async addEmployee() {
      var emObj = new FormData();
      emObj.append("faceImg", this.$refs.faceFile.files[0]);

      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }

      var face = "";
      await axios.post("/project/upload", emObj, config).then(resp => {
        face = resp.data;
      });

      this.addObj.face = face;
      axios.get("/project/em/add", {params: this.addObj}).then(resp => {
        if (resp.data == "ok") {
          this.isAddDiv = false;
          this.findByItem(1)
        }
      })

    }
  },
  created() {
    this.findByItem(1)
  }
}
</script>

<style scoped>
.dialogDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.contentDiv {
  width: 600px;
  height: 400px;
  background: white;
  padding: 20px;
  border: 2px solid black;
}
</style>